<template>
  <el-dialog :visible="visible"
             :title="title"
             :before-close="close"
             width="70%"
             top="20vh"
             :close-on-click-modal="false"
             append-to-body>
    <el-form ref="form"
             :model="form"
             label-width="80px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="承运方">
            <el-input v-model="form.contractNo"
                      placeholder="请输入承运方"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货方">
            <el-input v-model="form.combineContractNo"
                      placeholder="请输入收货方"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary"
                     @click=" page=1; getList();">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="settable"
              v-loading="loading"
              :data="currentData"
              height="500px">
      <el-table-column type="index"
                       align="center"
                       label="序号">
      </el-table-column>
      <template v-for="(column, index) in columns">
        <el-table-column :key="index"
                         :prop="column.prop"
                         :label="column.name"
                         :show-overflow-tooltip="false"
                         :width="['carrier','consignee', 'volumeAsk'].includes(column.type) ? '225':''">
          <template slot-scope="scope">
            <div v-if="column.type === 'carrier'">
              <CarrierSelect v-if="!scope.row.goodsId"
                             v-model="edit[column.prop]"
                             :filter="carrierFilter"
                             type="object" />
              <span v-else>{{ scope.row.goodsTypeName }}</span>
            </div>
            <div v-else-if="column.type === 'consignee'">
              <ConsigneeSelect v-if="!scope.row.goodsId"
                               v-model="edit[column.prop]"
                               :filter="consigneeFilter"
                               type="object" />
              <span v-else>{{ scope.row.goodsTypeName }}</span>
            </div>
            <div v-else-if="column.type === 'consigneeAree'">
              <div v-if="!scope.row.goodsId"
                   class="flex-start">
                <!-- <area-select v-model="edit[column.prop]"
                             align="center"
                             :area-values="[
                edit[column.prop].provinceCode,
                edit[column.prop].cityCode,
                edit[column.prop].districtCode
                ]"
                             @confirm="selectToArea" /> -->
                <area-cascader v-model="edit[column.prop]"
                               :props="props"
                               @input="selectToArea" />
                <el-input v-model="edit.consigneeAddress"
                          placeholder="请输入详细地址" />
              </div>
              <span v-else>{{ scope.row.goodsTypeName }}</span>
            </div>
            <div v-else-if="column.type === 'volumeAsk'">
              <div v-if="!scope.row.goodsId"
                   class="flex-start">
                <RelationalOperatorsSelect v-model="edit[column.prop]" />
                <el-input v-model="edit.volume"
                          placeholder="请输入体积" />
              </div>
              <span v-else>{{ scope.row.goodsTypeName }}</span>
            </div>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作"
                       width="140"
                       align="center">
        <template slot-scope="scope">
          <div class="operationSty">
            <el-button v-if="scope.$index != 0"
                       type="text"
                       onkeydown="if(event.keyCode==13){return false;}"
                       @click="deleteRow(scope.row)">
              删除
            </el-button>
            <el-button v-if="scope.$index === 0"
                       type="text"
                       @click="addGoods">
              确定
            </el-button>
            <el-divider v-if="scope.$index === 0"
                        direction="vertical" />
            <el-button v-if="scope.$index === 0"
                       type="text"
                       @click="clean">
              清空
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="mt10"
                   :current-page="page"
                   :page-size="pageSize"
                   :total="total"
                   :page-sizes="[10, 50, 100, 500, 1000]"
                   layout="total, sizes, prev, pager, next, jumper"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange">
    </el-pagination>
    <!-- <div class="mt10 flex-end">
        <el-button type="default"
                   @click="close">取消</el-button>
      </div> -->
  </el-dialog>
</template>

<script>
import AreaCascader from "@basic/area/AreaCascader.vue";
import CarrierSelect from "@basic/CarrierSelect.vue";
import ConsigneeSelect from "@basic/ConsigneeSelect.vue";
import RelationalOperatorsSelect from "@basic/RelationalOperatorsSelect.vue"
import { finance } from "@/api/index";
export default {
  name: "TransportTagsDialog",
  components: { AreaCascader, CarrierSelect, ConsigneeSelect, RelationalOperatorsSelect },
  props: {
    visible: Boolean,
    askType: String
  },
  data () {
    return {
      loading: false,
      form: {
        contractNo: null,
        combineContractNo: null,
      },
      props: {
        label: 'name',
        value: 'areaCode',
        checkStrictly: true
      },
      edit: {
        carrier: null,
        consignee: null,
        consigneeAree: {
          city: null,
          cityCode: null,
          district: null,
          districtCode: null,
          province: null,
          provinceCode: null
        },
        consigneeAddress: null,
        volumeAsk: null,
        volume: null,
      },
      page: 1,
      pageSize: 10,
      total: 0,
      currentData: [{}], // 当页数据
      tableData: {}, // 全部数据
      columns: [
        { name: "*承运方", prop: "carrier", type: "carrier" },
        { name: "*收货方", prop: "consignee", type: "consignee" },
        { name: "*收货详细地址", prop: "consigneeAree", type: "consigneeAree" },
        { name: "*体积要求", prop: "volumeAsk", type: "volumeAsk" },
      ],
    };
  },
  computed: {
    title () {
      const titles = {
        pick: "提货",
        deliver: "送货",
        onLoad: "装货",
        offLoad: "卸货",
      }
      return titles[this.askType]
    },
    listParams () {
      return {
        page: this.page,
        size: this.pageSize,
        sort: [
          {
            asc: false,
            name: "createAt"
          }
        ],
      }
    },
    carrierFilter () {
      return {
        type: [0, 1],
        status: 1,
        sort: [{ name: "hots", asc: false }]
      }
    },
    consigneeFilter () {
      return {
        status: 1,
        sort: [{ name: "hots", asc: false }]
      }
    }
  },
  created () {
    // this.getList();
  },
  methods: {
    // 列表查询
    async getList () {
      const { data } = await finance.search({ ...this.listParams });
      this.total = data?.page.total;
      this.tableData = data?.page.records;
    },
    // 地区
    selectToArea (val) {
      this.edit.consigneeAree = Object.assign(this.edit.consigneeAree, val);
    },
    // 分页数量改变
    handleSizeChange (value) {
      this.pageSize = value;
      this.getList();
    },
    // 当前页数改变
    handleCurrentChange (value) {
      this.page = value;
      this.getList();
    },
    deleteRow (row) {

    },
    addGoods () {
      console.log("=========>edit", this.edit)
    },
    // 清空
    clean () {
      this.edit = {
        carrier: null,
        consignee: null,
        consigneeAree: {
          city: "",
          cityCode: "",
          district: "",
          districtCode: "",
          province: "",
          provinceCode: ""
        },
        consigneeAddress: null,
        volumeAsk: null,
        volume: null,
      };
    },
    // 关闭弹窗
    close () {
      this.$emit("update:visible", false);
    },
  }
};
</script>

<style lang="scss" scoped>
.mt10 {
  margin-top: 10px;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
</style>
